<template>
    <div class="sidebar">
        <div class="logo"><img src="../assets/img/logo.png">合规云</div>
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#212D4B"
            text-color="rgba(255, 255, 255, 0.66)"
            active-text-color="#fff"
            unique-opened
            router
        >
            <template v-for="item in items">
                <template v-if="item">
                    <el-menu-item :index="item.index" :key="item.index" class="sidebarNav">
                        <img width="14" :src="item.img">
                        <img width="14" class="imgHOver" :src="item.imgHOver">
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
// import bus from "../common/bus";
export default {
    data() {
        return {
            items: [
                {
                    img: require("../assets/img/sidebar1.png"),
                    imgHOver: require("../assets/img/sidebar01.png"),
                    index: "index",
                    title: "首页",
					details: []
                },
                {
                    img: require("../assets/img/sidebar2.png"),
                    imgHOver: require("../assets/img/sidebar02.png"),
                    index: "lhyg",
                    title: "灵活用工平台",
					details: ['lhygDel']
                },
                {
                    img: require("../assets/img/sidebar3.png"),
                    imgHOver: require("../assets/img/sidebar03.png"),
                    index: "business",
                    title: "企业信息",
					details: ['businessDel']
                },
                {
                    img: require("../assets/img/sidebar4.png"),
                    imgHOver: require("../assets/img/sidebar04.png"),
                    index: "service",
                    title: "服务者信息",
					details: ['serviceDel']
                    // subs: [
                    //     {
                    //         index: "form",
                    //         title: "服务者信息详情-已办"
                    //     },
                    //     {
                    //         index: "upload",
                    //         title: "服务者信息详情-未办"
                    //     }charts
                    // ]
                },
                {
                    img: require("../assets/img/sidebar5.png"),
                    imgHOver: require("../assets/img/sidebar05.png"),
                    index: "Individual",
                    title: "个体户信息",
					details: ['IndividualDel']
                },
                {
                    img: require("../assets/img/sidebar6.png"),
                    imgHOver: require("../assets/img/sidebar06.png"),
                    index: "assignment",
                    title: "任务信息",
					details: ['assignmentDel']
                },
                {
                    img: require("../assets/img/sidebar3.png"),
                    imgHOver: require("../assets/img/sidebar03.png"),
                    index: "project",
                    title: "项目管理",
					details: ['projectDel']
                },
                {
                    img: require("../assets/img/sidebar7.png"),
                    imgHOver: require("../assets/img/sidebar07.png"),
                    index: "settlement",
                    title: "结算信息",
					details: ['settlementDel']
                },
                {
                    img: require("../assets/img/caiwu.png"),
                    imgHOver: require("../assets/img/caiwu1.png"),
                    index: "settlements",
                    title: "无感发薪结算单",
					details: ['settlementDels']
                },
                {
                    img: require("../assets/img/sidebar8.png"),
                    imgHOver: require("../assets/img/sidebar08.png"),
                    index: "invoice",
                    title: "发票信息",
					details: ['invoiceDel']
                },
                {
                    img: require("../assets/img/account.png"),
                    imgHOver: require("../assets/img/account1.png"),
                    index: "accountManagement",
                    title: "账号管理",
					details: ['establishAccount']
                },
                {
                    img: require("../assets/img/icon_banli01.png"),
                    imgHOver: require("../assets/img/icon_banli_1.png"),
                    index: "personal",
                    title: "个体户办理",
					details: ['personal']
                }
            ]
        };
    },
    computed: {
        onRoutes() {
			// 根据route地址判断左侧导航选中
			let path = this.$route.path.replace("/", "")
			let rPath = ''
			for(let i = 0; i < this.items.length; i++) {
				let item = this.items[i]
				if(item.index == path || item.details.includes(path)) {
					rPath = item.index
				}
			}
            return rPath || path
        },
        collapse(){
            return this.$store.state.collapse
        }
    }
};
</script>

<style scoped>
li.sidebarNav.el-menu-item.is-active {
    background: #026BE4 !important;
}
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0;
    overflow-y: scroll;
    z-index: 1;
    width: 14%;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 100%;
    border: 0;
}
.sidebar > ul {
    height: 100%;
}
.el-menu-item [class^=el-icon-] {
    position: relative;
    top: -2px;
}
.logo {
    background: rgb(33, 45, 75);
    color: #fff;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
}
.logo img {
    width: 40px;
    float: left;
    margin: 10px 10px 0 20px;
    border-radius: 100%;
}
.sidebar-el-menu[data-v-7d622f5c]:not(.el-menu--collapse) {
    width: 100%;
}
.el-menu-item img {
    margin: -3px 9px 0 0;
}
.el-menu-item img.imgHOver,.el-menu-item.is-active img {
    display: none;
}
.el-menu-item.is-active img.imgHOver {
   display: inline-block;
}
</style>
